<template>
  <div class="main-box">
    <div style="width: 100vw; display: flex; justify-content: space-between">
      <div class="first-item">
        <headline comtitle="毕业去向类别"></headline>
        <destination></destination>
      </div>
      <div class="first-item" style="height: 25vh">
        <headline comtitle="学校毕业去向落实率"></headline>
        <implementAll></implementAll>
      </div>
      <div ref="mainItem" class="first-item" style="height: 25vh">
        <headline comtitle="学院毕业去向落实率"></headline>
        <implementPart :maxHeight="maxHeight"></implementPart>
      </div>
      <!-- <div class="main-item">
                <headline comtitle="热门专业"></headline>
                <hotMajor></hotMajor>
            </div> -->
    </div>
    <div>
      <div class="main-item" style="margin-top: 1vh">
        <headline comtitle="毕业生就业单位行业分布"></headline>
        <industry></industry>
      </div>
      <!-- <div class="main-item">
        <headline comtitle="计划与补贴"></headline>
        <plansAndSubsidies></plansAndSubsidies>
      </div> -->
      <div class="main-item" style="margin-top: 1vh">
        <headline comtitle="未就业数据统计"></headline>
        <unemployed></unemployed>
      </div>
    </div>

    <div class="mapcontanier">
      <areaVue></areaVue>
      <div
        style="
          display: flex;
          width: 32vw;
          justify-content: space-around;
          margin-top: 0.5vh;
        "
      >
        <div style="width: 32vw">
          <headline comtitle="毕业生省内城市就业情况(%)"></headline>
          <localVue style="height: 15vh; background-color: #0b1f42"></localVue>
        </div>
        <!-- <div style="width: 23.5vw">
                    <headline comtitle="省外城市就业比率(%)"></headline>
                    <nolocal style="height: 15vh; background-color: #0b1f42"></nolocal>
                </div> -->
      </div>
    </div>
    <div>
      <div class="main-item" style="margin-top: 1vh; overflow: hidden">
        <headline comtitle="毕业生就业单位性质分布"></headline>
        <workNature></workNature>
      </div>
      <!-- <div class="main-item">
        <headline comtitle="专业预警"></headline>
        <majorCrisis></majorCrisis>
      </div> -->
      <div class="main-item" style="margin-top: 1vh">
        <headline comtitle="就业帮扶进展"></headline>
        <difficulty></difficulty>
      </div>
    </div>
  </div>
</template>

<script>
import implementAll from "@/components/implementAll.vue";
import destination from "@/components/destination.vue";
import implementPart from "@/components/implementPart.vue";
import headline from "@/components/headline.vue";
import recruit from "@/components/recruit.vue";
import hotMajor from "@/components/hotMajor.vue";
import workNature from "@/components/workNature.vue";
import majorCrisis from "@/components/majorCrisis.vue";
import localVue from "@/components/local.vue";
import nolocal from "@/components/nolocal.vue";
import areaVue from "@/components/area.vue";
import plansAndSubsidies from "@/components/plansAndSubsidies.vue";
import unemployed from "@/components/unemployed.vue";
import industry from "@/components/industry.vue";
import difficulty from "@/components/difficulty.vue";
export default {
  components: {
    implementAll,
    destination,
    implementPart,
    headline,
    recruit,
    hotMajor,
    workNature,
    majorCrisis,
    localVue,
    areaVue,
    plansAndSubsidies,
    unemployed,
    industry,
    nolocal,
    difficulty,
  },
  data() {
    return {
      maxHeight: 0,
    };
  },
  mounted() {
    this.updateHeight();
    window.addEventListener("resize", this.updateHeight); // 监听窗口大小变化
  },
  methods: {
    updateHeight() {
      this.$nextTick(() => {
        const windowWidth = window.innerHeight;
        this.maxHeight = 0.24 * windowWidth;
        console.log(this.maxHeight);
      });
    },
  },
};
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
  background-color: #0e1224;
}

.main-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
  background-color: #0e1224;

  .main-item {
    width: 32vw;
    height: 32vh;
    background-color: rgb(11, 31, 66);
  }

  .first-item {
    width: 32vw;
    height: 31vh;
    background-color: rgb(11, 31, 66);
  }

  .main-item:nth-child(-n + 3) {
    margin: 0 0 1vh 0;
  }
}

.mapcontanier {
  width: 32vw;
  height: 64vh;
  background-color: rgb(11, 31, 66);
}
</style>